app/server/auth.tsx (1)

35-37: Confirm nullability and exposure of profile picture fields

Prisma has profilePictureId String?, but here the additional field is declared as type: 'string' without an explicit optional/null config. If BetterAuth treats additional fields as required by default, this could break sign-up. Also, if the UI relies on user.image as the canonical URL, you may not need to expose profilePictureUrl here; if you do, add it consistently.

Would you like me to check BetterAuth’s expected shape for optional additional fields and propose a consistent mapping (id vs. URL)?

app/components/form/field-text/index.tsx (1)

19-21: Optional: rename/component split for clarity

FieldText now accepts type="file". Consider a dedicated FieldFile to encapsulate accept/multiple/size validation and previews, leaving FieldText for textual inputs.

app/components/form/form-field-controller.tsx (1)

82-86: Minor: group simple inputs together

You can fold 'file' into the 'text'|'email'|'tel' group once FieldText handles the special case internally to keep the switch compact.

-      case 'text':
-      case 'email':
-      case 'tel':
-        return <FieldText {...props} />;
+      case 'text':
+      case 'email':
+      case 'tel':
+      case 'file':
+        return <FieldText {...props} />;
@@
-      case 'file':
-        return <FieldText {...props} />;

Also applies to: 108-109

prisma/schema.prisma (1)

28-29: Key strategy: prefer stable avatars/${user.id} S3 key

Per prior learning, avatar keys should be avatars/${user.id} to overwrite on update (avoid storage bloat). If that’s the approach, profilePictureId can be derived and may not need storing; otherwise, ensure lifecycle rules delete old keys.

Would you like a migration plan to remove profilePictureUrl and rely on image + deterministic keying?

app/features/user/schema.ts (1)

28-29: Type it consistently and prevent empty strings

Consider zu.string.nonEmptyNullish(z.string()) for profilePictureId to avoid persisting empty values. If you keep profilePictureUrl in Prisma, expose it here as z.string().nullish() or remove it from the schema to avoid confusion.

-    profilePictureId: z.string().nullish(),
+    profilePictureId: zu.string.nonEmptyNullish(z.string()),
+    // profilePictureUrl: z.string().nullish(), // if retained in Prisma and used

app/locales/ar/account.json (1)

23-31: LGTM: Arabic translations added

Strings are present for all new keys. If you standardize on “update” vs “change” across locales, align later.

app/locales/sw/account.json (1)

24-30: Swahili phrasing/consistency tweaks (“update” vs “improve”).

Prefer “sasisha/imesasishwa” to match existing copy (“changeNameDrawer”) and avoid “boreshwa” (improve).

   "changeProfilePictureDrawer": {
     "title": "Badilisha avatar yako",
     "description": "Fomu ya kubadilisha avatar yako",
     "label": "Avatar",
-    "submitButton": "Badilisha",
-    "successMessage": "Avatar imeboreshwa",
-    "errorMessage": "Imeshindikana kuboresha avatar yako"
+    "submitButton": "Sasisha",
+    "successMessage": "Avatar imesasishwa",
+    "errorMessage": "Imeshindikana kusasisha avatar yako"
   }

app/env/server.ts (1)

52-53: Typo in comment (“prodution”).

-        // Check in prodution if the value is not REPLACE ME
+        // Check in production if the value is not REPLACE ME

.env.example (1)

4-15: dotenv-linter nits (quotes/order).

To appease the linter: drop unnecessary quotes and reorder keys (non-functional).

package.json (1)

35-35: Make dk:start idempotent for first run

docker compose --profile dev start fails if services weren’t created. Prefer up -d so it also creates them when needed.

-    "dk:start": "docker compose --profile dev start",
+    "dk:start": "docker compose --profile dev up -d",

app/lib/object-storage/index.ts (1)

5-10: LGTM; MinIO client correctly parameterized

Looks consistent with better-upload’s MinIO helper; credentials and endpoint come from validated env.

If you ever point to AWS S3, ensure region is a real AWS region and consider exposing forcePathStyle toggle (MinIO needs it; AWS doesn’t).

app/features/account/schema.ts (1)

13-19: Align validator helper for consistency

To match the rest of the file, use zu.string.nonEmpty for profilePicture.

 export const zFormFieldsAccountUpdateProfilePicture = () =>
   z.object({
-    profilePicture: z.string().min(1),
+    profilePicture: zu.string.nonEmpty(z.string()),
   });

Optional: name the field profilePictureId to reflect what the backend expects, and disable submit until an upload succeeds.

app/features/account/user-card.tsx (1)

25-27: Remove debug log

Extraneous console log on button click; the drawer trigger already handles opening.

-            onClick={() => {
-              console.log('update picture');
-            }}
+            onClick={() => {}}

Or drop the onClick entirely.

</blockquote></details>
<details>
<summary>app/server/routers/account.tsx (2)</summary><blockquote>

`69-71`: **Resolve TODO: return proper errors and/or separate RPC**

Swallowing failures hides issues from the client. Either:
- bubble up a 5xx/structured error, or
- split avatar update into a dedicated RPC and return success/failure explicitly.


I can refactor this into `account.updateAvatar` with clear error handling if helpful.

---

`87-92`: **Avoid clearing name implicitly**

`name: input.name ?? ''` will wipe the name if `name` is omitted. Prefer keeping the existing value if undefined.


```diff
-          name: input.name ?? '',
+          ...(typeof input.name === 'string' ? { name: input.name } : {}),

app/features/account/change-profile-picture-drawer.tsx (5)

42-47: Use defaultValues instead of values to avoid controlled re-renders (esp. with ).

react-hook-form recommends defaultValues for initial state; values turns the form into a fully controlled source-of-truth and can cause unexpected resets or warnings with file inputs.

-  const form = useForm<FormFieldsAccountUpdateProfilePicture>({
-    resolver: zodResolver(zFormFieldsAccountUpdateProfilePicture()),
-    values: {
-      profilePicture: '',
-    },
-  });
+  const form = useForm<FormFieldsAccountUpdateProfilePicture>({
+    resolver: zodResolver(zFormFieldsAccountUpdateProfilePicture()),
+    defaultValues: {
+      profilePicture: '',
+    },
+  });

---

83-96: Preserve existing query params when toggling the drawer.

Your navigate() overwrites the entire search object. Merge instead to avoid clobbering unrelated params.

-      onOpenChange={(open) => {
-        form.reset();
-        router.navigate({
-          replace: true,
-          to: '.',
-          search: {
-            state: open ? 'change-profile-picture' : '',
-          },
-        });
-      }}
+      onOpenChange={(open) => {
+        form.reset();
+        router.navigate({
+          replace: true,
+          to: '.',
+          search: (prev) => ({ ...prev, state: open ? 'change-profile-picture' : '' }),
+        });
+      }}

---

119-139: Harden the file input UX: accept filter, size/type guard, avoid autofocus on mobile.

• Add accept="image/*" (or a stricter list).
• Enforce a size limit and show a friendly error.
• Autofocus on a file input can trigger the picker immediately; consider removing.

               <FormFieldController
                 control={form.control}
                 type="file"
                 name="profilePicture"
                 size="lg"
+                accept="image/png,image/jpeg,image/webp"
                 onChange={(e) => {
-                  if (e.target.files?.[0]) {
-                    upload(e.target.files[0], {
+                  const f = e.target.files?.[0];
+                  if (f) {
+                    const MAX = 5 * 1024 * 1024; // 5MB
+                    if (!/^image\/(png|jpe?g|webp)$/.test(f.type) || f.size > MAX) {
+                      form.setError('profilePicture', { message: t('account:changeProfilePictureDrawer.invalidFile') || 'Invalid file' });
+                      return;
+                    }
+                    upload(f, {
                       metadata: {
                         userId: session.data?.user.id,
                       },
                     });
                   }
                 }}
-                autoFocus
               />

---

142-149: Disable the submit button until an upload key exists; keep loading state as-is.

Prevents accidental empty submits.

             <Button
               type="submit"
               className="w-full"
               size="lg"
               loading={updateUser.isPending || isPending}
+              disabled={!uploadedFile?.objectKey || updateUser.isPending || isPending}
             >

---

64-81: Leverage server-side keying to avoid storage bloat.

Ensure the upload route stores avatar at avatars/${user.id} (as per team convention) and update the returned key accordingly, so subsequent uploads overwrite the previous image.

This aligns with our prior choice to overwrite avatars to avoid orphaned objects. If the server already enforces this, great—just confirm the returned key matches the convention.

docker-compose.yml (2)

37-53: Optional: avoid public bucket in dev by returning signed URLs.

Granting anonymous download simplifies dev but normalizes a risky pattern. Consider removing anonymous access and using signed URLs even in dev.

-      mc anonymous set download default/${S3_BUCKET_NAME};
+      # Consider using presigned URLs instead of anonymous access in dev.
+      # mc anonymous set download default/${S3_BUCKET_NAME};

---

19-36: Pin by digest for reproducibility.

The floating tag may change over time. Pinning to a sha256 digest makes CI/dev deterministic.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: yoannfleurydev
PR: BearStudio/start-ui-web#443
File: src/lib/s3/config.ts:13-13
Timestamp: 2025-02-21T08:38:40.338Z
Learning: In the avatar upload feature, the S3 key is intentionally set to `avatars/${user.id}` to ensure that new avatar uploads overwrite the previous one, preventing storage bloat and simplifying avatar management.

package.json (1)

34-34: Make dk:init more reliable by waiting for services to be healthy

Compose supports --wait to block until healthchecks pass. This avoids races when MinIO is needed immediately after init.

-    "dk:init": "docker compose --profile init up -d",
+    "dk:init": "docker compose --profile init up -d --wait",

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: yoannfleurydev
PR: BearStudio/start-ui-web#443
File: src/lib/s3/config.ts:13-13
Timestamp: 2025-02-21T08:38:40.338Z
Learning: In the avatar upload feature, the S3 key is intentionally set to `avatars/${user.id}` to ensure that new avatar uploads overwrite the previous one, preventing storage bloat and simplifying avatar management.

app/features/account/user-card.tsx (1)

20-22: Fix AvatarImage src; avoid "undefined" URL and normalize join

Construct the URL only when both base and id exist; otherwise pass undefined so no request is made. Also join via new URL to avoid double slashes.

-  const getImageUrl = () => {
-    return `${envClient.VITE_S3_BUCKET_PUBLIC_URL}/${session.data?.user.avatarFileId}`;
-  };
+  const avatarSrc =
+    session.data?.user.avatarFileId && envClient.VITE_S3_BUCKET_PUBLIC_URL
+      ? new URL(
+          session.data.user.avatarFileId,
+          envClient.VITE_S3_BUCKET_PUBLIC_URL
+        ).toString()
+      : undefined;

-                {session.data?.user.avatarFileId ? (
-                  <AvatarImage
-                    src={getImageUrl()}
-                    alt={session.data?.user.name}
-                  />
-                ) : (
+                {session.data?.user.avatarFileId ? (
+                  <AvatarImage
+                    src={avatarSrc}
+                    alt={session.data?.user.name ?? 'Avatar'}
+                  />
+                ) : (

Also applies to: 31-35

app/server/routers/account.tsx (1)

53-67: Guard S3 delete and fix log field names; delete only when key changed

Avoid sending DeleteObject with an undefined key and skip deletion when the new key matches the old one.

-      // If profilePictureId is defined, check to delete the old one
-      if (input.avatarFileId) {
-        // Remove old file if there was one
-        const deleteCommand = new DeleteObjectCommand({
-          Bucket: envServer.S3_BUCKET_NAME,
-          Key: context.user.avatarFileId,
-        });
-        try {
-          await s3client.send(deleteCommand);
-        } catch (error) {
-          context.logger.warn('Fail to delete user profile picture', {
-            profilePictureId: context.user.avatarFileId,
-            error,
-          });
-        }
+      if (input.avatarFileId) {
+        if (
+          context.user.avatarFileId &&
+          context.user.avatarFileId !== input.avatarFileId
+        ) {
+          const deleteCommand = new DeleteObjectCommand({
+            Bucket: envServer.S3_BUCKET_NAME,
+            Key: context.user.avatarFileId,
+          });
+          try {
+            await s3client.send(deleteCommand);
+          } catch (error) {
+            context.logger.warn('Fail to delete user avatar', {
+              avatarFileId: context.user.avatarFileId,
+              error,
+            });
+          }
+        }

app/server/routers/account.tsx (1)

69-82: Persist new avatarFileId (ok) — align logs with new naming

-        } catch (error) {
-          context.logger.warn('Fail to save user profile picture', {
-            profilePictureId: context.user.avatarFileId,
-            error,
-          });
-        }
-        return;
+        } catch (error) {
+          context.logger.warn('Fail to save user avatar', {
+            avatarFileId: input.avatarFileId,
+            error,
+          });
+        }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: yoannfleurydev
PR: BearStudio/start-ui-web#443
File: src/lib/s3/config.ts:13-13
Timestamp: 2025-02-21T08:38:40.338Z
Learning: In the avatar upload feature, the S3 key is intentionally set to `avatars/${user.id}` to ensure that new avatar uploads overwrite the previous one, preventing storage bloat and simplifying avatar management.

Learnt from: ivan-dalmet
PR: BearStudio/start-ui-web#532
File: src/server/config/oauth/providers/discord.ts:11-11
Timestamp: 2024-10-14T15:29:53.279Z
Learning: In `src/server/config/oauth/providers/discord.ts`, when defining the `zDiscordUser` schema, keep fields like `username` as nullable (e.g., `.nullish()`), as the Discord API might return null values despite the documentation stating otherwise.

Learnt from: yoannfleurydev
PR: BearStudio/start-ui-web#443
File: src/lib/s3/config.ts:13-13
Timestamp: 2025-02-21T08:38:40.338Z
Learning: In the avatar upload feature, the S3 key is intentionally set to `avatars/${user.id}` to ensure that new avatar uploads overwrite the previous one, preventing storage bloat and simplifying avatar management.

.env.example (2)

17-17: Public URL now targets API port — looks good. Ensure access policy.

LGTM and resolves the earlier “console port” issue. If the bucket isn’t public, fetching ${VITE_S3_BUCKET_PUBLIC_URL}/${key} will 403; either set a public-read bucket policy for dev or use signed URLs.

---

9-14: Fix undefined var in S3_ENDPOINT; align ordering and quotes.

DOCKER_MINIO_FORWARD_PORT isn’t defined here; use DOCKER_MINIO_API_PORT. Also unquote and reorder per linter.

-# S3
-S3_ENDPOINT="http://127.0.0.1:${DOCKER_MINIO_FORWARD_PORT}"
-S3_BUCKET_NAME="start-ui-bucket"
-S3_ACCESS_KEY_ID="startui-access-key"
-S3_SECRET_ACCESS_KEY="startui-secret-key"
-S3_REGION="default"
+# S3
+S3_ACCESS_KEY_ID=startui-access-key
+S3_BUCKET_NAME=start-ui-bucket
+S3_ENDPOINT=http://127.0.0.1:${DOCKER_MINIO_API_PORT}
+S3_REGION=default
+S3_SECRET_ACCESS_KEY=startui-secret-key
+
+# If you expose MinIO via a forwarded port/reverse-proxy, document it separately to avoid collisions, e.g.:
+# FORWARDED_S3_ENDPOINT=http://127.0.0.1:${DOCKER_MINIO_FORWARD_PORT}

.env.example (2)

3-7: Unquote values and fix key order (dotenv-linter).

Remove quotes for numbers/identifiers and order keys so PASSWORD comes before UI_PORT to satisfy lint hints.

 # OBJECT STORAGE
-DOCKER_MINIO_API_PORT="9000"
-DOCKER_MINIO_UI_PORT="9001"
-DOCKER_MINIO_USERNAME="startui"
-DOCKER_MINIO_PASSWORD="startui"
+DOCKER_MINIO_API_PORT=9000
+DOCKER_MINIO_USERNAME=startui
+DOCKER_MINIO_PASSWORD=startui
+DOCKER_MINIO_UI_PORT=9001

---

31-31: Fix grammar in comment.

Change “to a generated secret” → “to generate a secret”.

-BETTER_AUTH_SECRET="REPLACE ME"       # You can use `npx @better-auth/cli@latest secret` to a generated secret
+BETTER_AUTH_SECRET="REPLACE ME"       # You can use `npx @better-auth/cli@latest secret` to generate a secret

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: yoannfleurydev
PR: BearStudio/start-ui-web#443
File: src/lib/s3/config.ts:13-13
Timestamp: 2025-02-21T08:38:40.338Z
Learning: In the avatar upload feature, the S3 key is intentionally set to `avatars/${user.id}` to ensure that new avatar uploads overwrite the previous one, preventing storage bloat and simplifying avatar management.

src/components/form/field-text/index.tsx (1)

47-76: File input is incorrectly controlled.

For type="file", spreading {...field} passes a value prop to the native file input, which triggers React warnings and prevents React Hook Form from receiving the File/File[] objects. File inputs must be uncontrolled.

Apply this diff to handle file inputs specially:

     <Controller
       name={name}
       control={control}
       disabled={disabled}
-      defaultValue={defaultValue}
+      defaultValue={type === 'file' ? undefined : defaultValue}
       shouldUnregister={shouldUnregister}
       render={({ field, fieldState }) => (
         <div
           {...containerProps}
           className={cn(
             'flex flex-1 flex-col gap-1',
             containerProps?.className
           )}
         >
           <Input
             type={type}
             id={ctx.id}
             aria-invalid={fieldState.error ? true : undefined}
             aria-describedby={
               !fieldState.error
                 ? `${ctx.descriptionId}`
                 : `${ctx.descriptionId} ${ctx.errorId}`
             }
             {...rest}
-            {...field}
-            onChange={(e) => {
-              field.onChange(e);
-              rest.onChange?.(e);
-            }}
-            onBlur={(e) => {
-              field.onBlur();
-              rest.onBlur?.(e);
-            }}
+            name={field.name}
+            ref={field.ref}
+            {...(type === 'file'
+              ? {
+                  onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                    const files = Array.from(e.target.files ?? []);
+                    field.onChange(rest.multiple ? files : files[0] ?? null);
+                    rest.onChange?.(e);
+                  },
+                  onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
+                    field.onBlur();
+                    rest.onBlur?.(e);
+                  },
+                }
+              : {
+                  value: field.value,
+                  onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                    field.onChange(e);
+                    rest.onChange?.(e);
+                  },
+                  onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
+                    field.onBlur();
+                    rest.onBlur?.(e);
+                  },
+                })}
           />
           <FormFieldError />
         </div>
       )}
     />

docker-compose.yml (2)

18-34: Healthcheck references unavailable mc command.

The healthcheck runs mc ready local, but the official minio/minio image doesn't include the mc CLI tool.

Use MinIO's built-in HTTP health endpoint instead:

     healthcheck:
-      test: ['CMD', 'mc', 'ready', 'local']
+      test: ['CMD-SHELL', 'curl -f http://localhost:9000/minio/health/ready || exit 1']
       interval: 5s
       timeout: 5s
       retries: 5

---

35-52: Use internal container port in alias configuration.

The createbucket service references ${DOCKER_MINIO_API_PORT} when configuring the MinIO alias. Within the Docker Compose network, the service should connect to the container's internal port (9000) rather than the host-mapped port.

Apply this diff:

     command: ["sh", "-c", "
-      mc alias set default http://minio:${DOCKER_MINIO_API_PORT} \"${DOCKER_MINIO_USERNAME}\" \"${DOCKER_MINIO_PASSWORD}\";
+      mc alias set default http://minio:9000 \"${DOCKER_MINIO_USERNAME}\" \"${DOCKER_MINIO_PASSWORD}\";
       mc admin user add default ${S3_ACCESS_KEY_ID} ${S3_SECRET_ACCESS_KEY};
       mc admin policy attach default readwrite --user ${S3_ACCESS_KEY_ID};
       mc mb --ignore-existing default/${S3_BUCKET_NAME} 2>/dev/null;
       mc anonymous set download default/${S3_BUCKET_NAME};
       echo 'Bucket configuration completed successfully';
       "
     ]

src/env/client.ts (1)

46-46: Pipeline failure: VITE_S3_BUCKET_PUBLIC_URL is undefined and lacks URL validation.

The test environment fails because VITE_S3_BUCKET_PUBLIC_URL is required but not provided. Additionally, the schema should validate it as a URL.

Apply this diff to add URL validation:

-    VITE_S3_BUCKET_PUBLIC_URL: z.string(),
+    VITE_S3_BUCKET_PUBLIC_URL: z.string().url(),

Then add VITE_S3_BUCKET_PUBLIC_URL to:

• .env.example with a sample value (e.g., http://localhost:9000/default)
• Your CI environment variables with the appropriate public base URL

Note: Ensure the URL does not have a trailing slash, or update usages like ${envClient.VITE_S3_BUCKET_PUBLIC_URL}/${avatarFileId} to handle path joining correctly.

src/features/account/user-card.tsx (1)

20-22: Add type safety to URL construction.

The getImageUrl function doesn't validate that avatarFileId exists before constructing the URL, which could produce malformed URLs if called when avatarFileId is undefined/null. While the current usage (line 31) checks before calling, the function itself should be defensive.

Apply this diff to add a safety check:

-  const getImageUrl = () => {
-    return `${envClient.VITE_S3_BUCKET_PUBLIC_URL}/${session.data?.user.avatarFileId}`;
-  };
+  const getImageUrl = (fileId: string) => {
+    return `${envClient.VITE_S3_BUCKET_PUBLIC_URL}/${fileId}`;
+  };

And update the call site:

-                  <AvatarImage
-                    src={getImageUrl()}
-                    alt={session.data?.user.name}
-                  />
+                  <AvatarImage
+                    src={getImageUrl(session.data.user.avatarFileId)}
+                    alt={session.data?.user.name}
+                  />

src/lib/s3/index.ts (1)

1-12: Distinctly name S3 clients to prevent ambiguity.

Both src/lib/s3/index.ts (AWS SDK) and src/lib/object-storage/index.ts (MinIO) export s3client. Rename one or both exports (e.g., awsS3Client, minioClient) and update import sites to clearly differentiate implementations.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/routes/api/upload.ts (1)

18-20: Add common image formats and reduce max file size.

The current configuration is missing common formats and has an excessive size limit:

1. Missing formats: image/gif and image/avif are common avatar formats. AVIF in particular offers superior compression.
2. Size limit: 100MB is excessive for avatars. Typical avatar uploads are 5-10MB maximum, and reasonable limits improve UX and reduce resource usage.

Apply this diff to add missing formats and reduce the limit:

     avatar: route({
-      fileTypes: ['image/png', 'image/jpeg', 'image/webp'],
-      maxFileSize: 1024 * 1024 * 100, // 100Mb
+      fileTypes: ['image/png', 'image/jpeg', 'image/webp', 'image/gif', 'image/avif'],
+      maxFileSize: 1024 * 1024 * 10, // 10MB
       onBeforeUpload: async ({ req, file }) => {

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: yoannfleurydev
PR: BearStudio/start-ui-web#443
File: src/lib/s3/config.ts:13-13
Timestamp: 2025-02-21T08:38:40.338Z
Learning: In the avatar upload feature, the S3 key is intentionally set to `avatars/${user.id}` to ensure that new avatar uploads overwrite the previous one, preventing storage bloat and simplifying avatar management.

src/components/form/field-text/index.tsx (1)

19-21: File input handling issue remains unresolved.

Adding 'file' to the type union is necessary, but the underlying implementation issue flagged in the previous review has not been addressed. Spreading {...field} for type="file" will pass a value prop and forward the raw event, causing React warnings and preventing React Hook Form from receiving the File/File[] correctly.

Please refer to the previous review comment for the complete fix that handles file inputs specially by extracting files from e.target.files and passing them to field.onChange.

Configuration used: CodeRabbit UI

Review profile: CHILL